<layout-to-edit>
  <div :class="$store.state.appPrefix + '-p-course-info'">
    <div class="course-content">
      <div class="course-menus">
        <menus-mini :menus="newMenus" @menu-click="$tabToggle" />
      </div>
      <div v-if="activeTab === 'lesson'" class="lesson-list">
        <el-timeline>
          <el-timeline-item v-for="(it, k) in infos.lessons" :key="k"  @click.native="$goStudyLessonPage(it)">
            <div class="dot" slot="dot">{{k + 1}}</div>
            <div class="period-item">
              <div class="period-con">
                <div class="period-title">{{it.lessonName}}</div>
                <div class="period-funs">
                  <span v-for="sit in it.practiceProjects" class="funs-it">
                    <i class="el-icon-document"></i>
                    {{PRACTICE_PROJECT[sit.exerciseType]}}
                  </span>
                </div>
              </div>
              <div class="period-progress">
                <i v-if="it.finishLessonCount === 100" class="el-icon-circle-check"></i>
                <el-progress v-else width="40" color="#315BF4" stroke-width="4" type="circle" :percentage="Number(it.lessonFinishCompletion) * 100"></el-progress>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div v-else class="lesson-content">
        <div v-html="infos.courseIntroduction"></div>
      </div>
    </div>
    <div v-if="exerciseList.length > 0" class="course-extra">
      <div class="course-record">
        <div class="mod-title">
          <div class="title-inner">练习记录</div>
          <div class="mod-more" @click="$goPractice">更多 <i class="el-icon-arrow-right"></i></div>
        </div>
        <div class="mod-list">
          <el-timeline>
            <el-timeline-item v-for="(it, k) in exerciseList" :key="k">
              <div class="dot" slot="dot"></div>
              <div class="exer-item">
                <div class="exer-con">
                  <div class="exer-title">{{it.lessonName}}  [{{it.exerciseTypeName}}]</div>
                  <div class="exer-date">{{getTimeStr(it.finishTime)}}</div>
                </div>
                <el-button size="small" @click="$goReport(it)">查看</el-button>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>
  </div>
</layout-to-edit>
